<template>
  <div class="app-container">
    <el-row :gutter="20" class="mb20">
      <!-- 重置按钮 -->
      <el-col :span="24">
        <el-button type="primary" @click="getStatisticsData">重置数据</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mb20">
      <!-- 每日收入图表 -->
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>每日收入</span>
          </div>
          <div ref="revenueChart" class="chart-container" style="height: 300px;"></div>
        </el-card>
      </el-col>

      <!-- 采购量统计图表 -->
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>采购量统计</span>
          </div>
          <div ref="procurementChart" class="chart-container" style="height: 300px;"></div>
        </el-card>
      </el-col>

      <!-- 菜品订单排名图表 -->
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>菜品订单排名</span>
          </div>
          <div ref="rankingChart" class="chart-container" style="height: 300px;"></div>
        </el-card>
      </el-col>

      <!-- 菜品库存图表（新加的部分） -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>菜品库存</span>
          </div>
          <div ref="stockChart" class="chart-container" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getDailyRevenue, getDishPurchaseStats, getDishOrderRanking, getDishStock  } from '@/api/restaurant/statistics';

export default {
  name: "Statistics",
  data() {
    return {
      dailyRevenue: [],
      dishPurchaseStats: [],
      dishOrderRanking: [],
      dishStock: []
    };
  },
  created() {
    this.getStatisticsData();
  },
  methods: {
    // 获取统计数据
    getStatisticsData() {
      Promise.all([getDailyRevenue(), getDishPurchaseStats(), getDishOrderRanking(), getDishStock()])
        .then(([revenueResponse, purchaseResponse, rankingResponse, stockResponse]) => {
          this.dailyRevenue = revenueResponse.data;  // 假设接口返回的数据是数组
          this.dishPurchaseStats = purchaseResponse.data;
          this.dishOrderRanking = rankingResponse.data;
          this.dishStock = stockResponse.data; // 获取库存数据

          // 渲染图表
          this.renderCharts();
        })
        .catch(error => {
          console.error('获取统计数据失败:', error);
        });
    },

    // 渲染图表
    renderCharts() {
      // 每日收入图表
      const dailyRevenueChart = echarts.init(this.$refs.revenueChart);
      const dailyRevenueOptions = {
        title: { text: '每日收入' },
        xAxis: {
          type: 'category',
          data: this.dailyRevenue.map(item => item.date),  // 假设数据有 date 字段
        },
        yAxis: { type: 'value' },
        series: [{
          data: this.dailyRevenue.map(item => item.revenue),  // 假设数据有 revenue 字段
          type: 'line',
        }]
      };
      dailyRevenueChart.setOption(dailyRevenueOptions);

      // 菜品采购量统计图表
      const dishPurchaseChart = echarts.init(this.$refs.procurementChart);
      const dishPurchaseOptions = {
        title: { text: '菜品采购量统计' },
        xAxis: {
          type: 'category',
          data: this.dishPurchaseStats.map(item => item.dishName),  // 假设数据有 dishName 字段
        },
        yAxis: { type: 'value' },
        series: [{
          data: this.dishPurchaseStats.map(item => item.totalVolume),  // 假设数据有 quantity 字段
          type: 'bar',
        }]
      };
      dishPurchaseChart.setOption(dishPurchaseOptions);

      // 菜品订单排名图表
      const dishOrderRankingChart = echarts.init(this.$refs.rankingChart);
      const dishOrderRankingOptions = {
        title: { text: '菜品订单排名' },
        xAxis: {
          type: 'category',
          data: this.dishOrderRanking.map(item => item.dishName),  // 假设数据有 dishName 字段
        },
        yAxis: { type: 'value' },
        series: [{
          data: this.dishOrderRanking.map(item => item.orderCount),  // 假设数据有 orderCount 字段
          type: 'line',
        }]
      };
      dishOrderRankingChart.setOption(dishOrderRankingOptions);
      // 菜品库存图表
      const stockChart = echarts.init(this.$refs.stockChart);
      const stockOptions = {
        title: { text: '菜品库存' },
        xAxis: {
          type: 'category',
          data: this.dishStock.map(item => item.name), // 菜品名称
        },
        yAxis: { type: 'value' },
        series: [{
          data: this.dishStock.map(item => item.stock), // 库存数量
          type: 'bar',
          itemStyle: {
            normal: {
              color: (params) => {
                const stock = this.dishStock[params.dataIndex].stock;
                return stock <= 10 ? 'red' : '#5470C6'; // 库存低于10时显示为红色
              }
            }
          }
        }]
      };
      stockChart.setOption(stockOptions);
      
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
